<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>商品详情页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./less/main.css">
</head>

<body>
    <!-- wrap的作用: 后期加模块渲染 -->
    <div id="wrap">
        <header class="header_top">
            <div class="header_top_cont">
                <p class="header_top_cont_l">
                    欢迎来到商品汇!&nbsp;请
                    <a href="">登陆</a>
                    <em>|</em>
                    <a href="">登陆</a>
                </p>

                <div class="header_top_cont_r">
                    <a href="">我的订单</a>
                    <a href="">我的购物车</a>
                    <a href="">我的尚品汇</a>
                    <a href="">尚品汇会员</a>
                    <a href="">企业采购</a>
                    <a href="">关注尚品汇</a>
                    <a href="">合作招商</a>
                    <a href="">商家后台</a>
                </div>
            </div>
        </header>

        <header class="header_mid">
            <h1 id="logo"><img src="./images/Logo.png" alt=""></h1>
            <div class="searchBox">
                <input type="text" placeholder="请输入搜索内容">
                <button>按钮</button>
            </div>
        </header>

        <nav class="header_nav">
            <ul class="header_nav_cont">
                <li class="li_first">
                    <a href="#">全部商品分类</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">美妆馆</a>
                </li>
                <li>
                    <a href="#">尚品汇超市</a>
                </li>
                <li>
                    <a href="#">全球购</a>
                </li>
                <li>
                    <a href="#">闪购</a>
                </li>
                <li>
                    <a href="#">团购</a>
                </li>
                <li>
                    <a href="#">有趣</a>
                </li>
                <li>
                    <a href="#">秒杀</a>
                </li>
            </ul>
        </nav>

        <div id="content">
            <div class="conMain">
                <div class="navPath">
                    <a href="#">手机、数码、通讯</a><span>/</span><a href="#">手机</a><span>/</span><a
                        href="#">Apple苹果</a><span>/</span><a>iPhone 6S系</a>
                </div>

                <div class="bigCon">
                    <div class="left">
                        <div class="leftTop">
                            <div class="bigPic">
                                <div class="mask"></div>
                                <img src="./images/s1.png" alt="">
                            </div>
                            <div class="bigBigPic">
                                <img src="./images/b1.png" alt="">
                            </div>
                        </div>
                        <div class="leftBttom">
                            <a href="javascript:;" class="prev">&lt;</a>
                            <div class="picsWrap">
                                <ul>
                                    <!-- <li><img src="./images/s1.png"></li>
                                    <li><img src="./images/s2.png"></li>
                                    <li><img src="./images/s3.png"></li>
                                    <li><img src="./images/s1.png"></li>
                                    <li><img src="./images/s2.png"></li>
                                    <li><img src="./images/s3.png"></li>
                                    <li><img src="./images/s1.png"></li>
                                    <li><img src="./images/s2.png"></li>
                                    <li><img src="./images/s3.png"></li>
                                    <li><img src="./images/s1.png"></li>
                                    <li><img src="./images/s2.png"></li>
                                    <li><img src="./images/s3.png"></li>
                                    <li><img src="./images/s1.png"></li>
                                    <li><img src="./images/s2.png"></li> -->
                                </ul>
                            </div>
                            <a href="javascript:;" class="next">&gt;</a>
                        </div>
                    </div>

                    <div class="right">
                        <div class="rightTop">
                            <!-- <h3>${data.title}</h3>
                            <p class="pOne">${data.recommend}</p>
                            <div class="priceWrap">
                                <div class="priceTop">
                                    <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                                    <div class="price">
                                        <span>￥</span>
                                        <p>${data.price}</p>
                                        <i>降价通知</i>
                                    </div>
                                    <p class="pR">
                                        <span>累计评价</span>
                                        <span>${data.evaluateNum}</span>
                                    </p>
                                </div>
                                <div class="priceBottom">
                                    <span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                                    <p><span>${data.promoteSales.type}</span>
                                        <span>${data.promoteSales.content}</span>
                                    </p>
                                </div>
                            </div>
                            <div class="support">
                                <span>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</span>
                                <p>${data.support}</p>
                            </div>
                            <div class="address">
                                <span>配&nbsp;送&nbsp;至</span>
                                <p>${data.address}</p>
                            </div>
                        </div>
                    <div class="rightBttom">
                        <div class="choosed"></div>
                        <div class="chooseWrap">
                            <dl>
                                <dt>选择颜色</dt>
                                <dd>金色</dd>
                                <dd>银色</dd>
                                <dd>黑色</dd>
                            </dl>
                            <dl>
                                <dt>内存容量</dt>
                                <dd>16G</dd>
                                <dd>64G</dd>
                                <dd>128G</dd>
                                <dd>256G</dd>
                            </dl>
                            <dl>
                                <dt>选择版本</dt>
                                <dd>公开版</dd>
                                <dd>移动版</dd>
                            </dl>
                            <dl>
                                <dt>购买方式</dt>
                                <dd>官方标配</dd>
                                <dd>优惠移动版</dd>
                                <dd>电信优惠版</dd>
                            </dl>
                        </div>
                        <div class="addcart">
                            <div class="count">
                                <input type="text">
                                <a href="#">+</a>
                                <a href="#">-</a>
                            </div>
                            <button>加入购物车</button>
                        </div> -->
                        </div>
                    </div>
                </div>
                <!-- 产品信息 -->
                <div class="goods">
                    <div class="goods_l">
                        <div class="goods_l_t">
                            <h4 class="active">相关分类</h4>
                            <h4>推荐品牌</h4>
                        </div>
                        <div class="goods_l_b">
                            <div class="active">
                                <ul class="goodsList">
                                    <li>手机</li>
                                    <li>手机壳</li>
                                    <li>内存卡</li>
                                    <li>iPhone配件</li>
                                    <li>贴膜</li>
                                    <li>手机耳机</li>
                                    <li>移动电源</li>
                                    <li>平板电脑</li>
                                </ul>
                                <ul class="goodsList2">
                                    <li><img src="images/part01.png" alt=""> <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button"><a href="javascript:;">加入购物车</a></div>
                                    </li>
                                    <li><img src="images/part01.png" alt=""> <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button"><a href="javascript:;">加入购物车</a></div>
                                    </li>
                                    <li><img src="images/part01.png" alt=""> <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button"><a href="javascript:;">加入购物车</a></div>
                                    </li>
                                    <li><img src="images/part01.png" alt=""> <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button"><a href="javascript:;">加入购物车</a></div>
                                    </li>
                                </ul>
                            </div>
                            <div>推荐品牌内容</div>
                        </div>
                    </div>
                    <div class="goods_r">
                        <div class="goods_r_t">
                            <h4>选择搭配</h4>
                            <div class="goods_r_t_list">
                                <div class="left"><img src="images/l-m01.png" alt="">
                                    <p>¥5299</p><i>+</i>
                                </div>
                                <ul class="middle">
                                    <li><img src="images/dp01.png" alt=""> <span>Feless费勒斯VR</span>
                                        <div><input type="checkbox" value="50"> <span>50</span></div>
                                    </li>
                                    <li><img src="images/dp02.png" alt=""> <span>Feless费勒斯VR</span>
                                        <div><input type="checkbox" value="50"> <span>50</span></div>
                                    </li>
                                    <li><img src="images/dp03.png" alt=""> <span>Feless费勒斯VR</span>
                                        <div><input type="checkbox" value="50"> <span>50</span></div>
                                    </li>
                                    <li><img src="images/dp04.png" alt=""> <span>Feless费勒斯VR</span>
                                        <div><input type="checkbox" value="50"> <span>50</span></div>
                                    </li>
                                </ul>
                                <div class="right">
                                    <div>已购0件商品</div>
                                    <p>套餐价</p><i>¥5299</i>
                                    <div><button>加入购物车</button></div>
                                </div>
                            </div>
                        </div>
                        <div class="goods_r_b">
                            <ul class="tabBtns">
                                <li class="active"><a href="javascript:;">商品介绍</a></li>
                                <li><a href="javascript:;">规格包装</a></li>
                                <li><a href="javascript:;">售后与保障</a></li>
                                <li><a href="javascript:;">商品评价</a></li>
                                <li><a href="javascript:;">手机社区</a></li>
                            </ul>
                            <div class="tabConts">
                                <div class="active">
                                    <ul>
                                        <li>分辨率：1920*1080(FHD)</li>
                                        <li>后置摄像头：1200万像素</li>
                                        <li>前置摄像头：500万像素</li>
                                        <li>核 数：其他</li>
                                        <li>频 率：以官网信息为准</li>
                                        <li>品牌： Apple</li>
                                        <li>商品名称：APPLEiPhone 6s Plus</li>
                                        <li>商品编号：1861098</li>
                                        <li>商品产地：中国大陆</li>
                                        <li>商品毛重：0.51kg</li>
                                        <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                                        <li>系统：苹果（IOS）</li>
                                        <li>像素：1000-1600万品毛重：0.51kg</li>
                                        <li>机身内存：64GB</li>
                                    </ul><img src="images/intro01.png" alt=""> <img src="images/intro02.png" alt="">
                                    <img src="images/intro03.png" alt="">
                                </div>
                                <div>规格包装</div>
                                <div>售后与保障</div>
                                <div>商品评价</div>
                                <div>手机社区</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/data.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>